import { getApiClient } from '../utils/api';

export function useArticles11(initialParams = {}) {
  const state = reactive({
    articles: [],
    trendingArticles: [],
    authorRanks: [],
    pageNum: 1,
    totalPages: 1,
    pageSize: 20,
    isLoading: false,
    isFinished: false,
    error: null
  });
  // 使用 useAsyncData 实现服务端渲染
  const data = useAsyncData('articleDatas', async () => {
        try {
          const  repsone = await getApiClient().get('/app/article/list', {
            ...initialParams,
          });
          debugger
          if(repsone.code === 200){
            return {
              articles: repsone.rows,
              total:repsone.total
            }
          }

        } catch (err) {
          console.error('列表加载失败:', err);
          return {
            articles: [],
            total: 0
          }
        }
      }
  );
  console.log(data.total+'-----------------------------------')
  // Mock data for demonstration purposes
 /* onMounted(() => {
    // Simulate API call
    setTimeout(() => {
      // Mock articles data
      articles.value = [
        {
          id: '1',
          title: '2024 前端技术发展趋势与展望',
          description: '本文将介绍 2024 年前端技术的发展趋势，包括框架的更新迭代、新兴技术的应用以及未来可能的发展方向。',
          content: '<p>本文将介绍 2024 年前端技术的发展趋势...</p>',
          cover: 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          createdAt: '2024-07-01T08:00:00Z',
          updatedAt: '2024-07-01T10:30:00Z',
          author: {
            id: '101',
            name: '技术探索者',
            avatar: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            title: '资深前端开发工程师'
          },
          category: 'frontend',
          tags: ['JavaScript', 'Vue', 'React', '前端趋势'],
          viewCount: 12500,
          commentCount: 78,
          likeCount: 356
        },
        {
          id: '2',
          title: 'Vue 3 + TypeScript 实战指南：从入门到精通',
          description: '本文将带你了解 Vue 3 和 TypeScript 结合使用的最佳实践，从项目搭建到高级特性应用，全面提升开发效率。',
          content: '<p>Vue 3 和 TypeScript 的结合使用已经成为前端开发的主流选择...</p>',
          cover: 'https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          createdAt: '2024-06-28T09:15:00Z',
          updatedAt: '2024-06-29T11:20:00Z',
          author: {
            id: '102',
            name: 'Vue专家',
            avatar: 'https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            title: 'Vue.js 核心贡献者'
          },
          category: 'frontend',
          tags: ['Vue', 'TypeScript', '教程'],
          viewCount: 9800,
          commentCount: 56,
          likeCount: 245
        },
        {
          id: '3',
          title: 'Nuxt 3 SEO 优化完全指南',
          description: '学习如何利用 Nuxt 3 的内置功能和最佳实践来优化你的网站 SEO，提升搜索引擎排名和用户体验。',
          content: '<p>SEO 对于任何网站都至关重要，而 Nuxt 3 提供了强大的 SEO 功能...</p>',
          cover: 'https://images.pexels.com/photos/34140/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          createdAt: '2024-06-25T14:30:00Z',
          updatedAt: '2024-06-26T09:45:00Z',
          author: {
            id: '103',
            name: 'SEO达人',
            avatar: 'https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            title: 'Nuxt 专家 & SEO 顾问'
          },
          category: 'seo',
          tags: ['Nuxt', 'SEO', '优化', 'Vue'],
          viewCount: 7620,
          commentCount: 42,
          likeCount: 189
        },
        {
          id: '4',
          title: '深入理解 Node.js 微服务架构',
          description: '本文探讨了 Node.js 在微服务架构中的应用，包括设计原则、实现方法以及实际案例分析。',
          cover: 'https://images.pexels.com/photos/11035471/pexels-photo-11035471.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          createdAt: '2024-06-22T11:00:00Z',
          updatedAt: '2024-06-23T16:20:00Z',
          author: {
            id: '104',
            name: '后端架构师',
            avatar: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            title: '高级后端工程师'
          },
          category: 'backend',
          tags: ['Node.js', '微服务', '架构设计'],
          viewCount: 6580,
          commentCount: 37,
          likeCount: 156
        },
        {
          id: '5',
          title: 'CSS Grid 和 Flexbox：现代布局技术对比与实践',
          description: '详细比较 CSS Grid 和 Flexbox 的特点、适用场景，并通过实际案例展示如何结合两者打造灵活的网页布局。',
          cover: 'https://images.pexels.com/photos/39284/macbook-apple-imac-computer-39284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          createdAt: '2024-06-20T09:30:00Z',
          updatedAt: '2024-06-21T14:15:00Z',
          author: {
            id: '105',
            name: 'CSS大师',
            avatar: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            title: 'UI/UX 设计师 & 前端开发'
          },
          category: 'frontend',
          tags: ['CSS', 'Grid', 'Flexbox', '响应式设计'],
          viewCount: 5960,
          commentCount: 29,
          likeCount: 143
        }
      ]

      // Mock trending articles
      trendingArticles.value = [
        {
          id: '10',
          title: 'JavaScript 高级性能优化技巧',
          viewCount: 25600
        },
        {
          id: '11',
          title: '2024 年最受欢迎的编程语言排行',
          viewCount: 22400
        },
        {
          id: '12',
          title: 'AI 驱动的前端开发：现状与未来',
          viewCount: 18900
        },
        {
          id: '13',
          title: 'Web Components 实战：构建可复用 UI 组件',
          viewCount: 16700
        },
        {
          id: '14',
          title: '从零搭建高性能 Node.js 应用',
          viewCount: 15200
        }
      ]

      // Mock author rankings
      authorRanks.value = [
        {
          id: '201',
          name: '技术先锋',
          avatar: 'https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          title: '全栈开发工程师',
          articleCount: 87,
          followerCount: 12500
        },
        {
          id: '202',
          name: '编程爱好者',
          avatar: 'https://images.pexels.com/photos/936019/pexels-photo-936019.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          title: '前端架构师',
          articleCount: 65,
          followerCount: 9800
        },
        {
          id: '203',
          name: '代码艺术家',
          avatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
          title: 'JavaScript 专家',
          articleCount: 54,
          followerCount: 7600
        }
      ]

      loading.value = false
    }, 1000)
  })*/

  return {
    articles :data.articles,
    trendingArticles :[],
    authorRanks:[],
    total: data.total
  }
}
